<template>
  <div class="audio">
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(1) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(2) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(3) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(4) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(5) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(6) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(7) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(8) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(9) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(10) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(11) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(12) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(13) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(14) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(15) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(16) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(17) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(18) + `s`"></div>-->
<!--    <div class="wave" :style="`&#45;&#45;wave-delay:` + getTimeOut(19) + `s`"></div>-->
    <div v-for="n in 25" :key="n">
      <div class="wave" :style="`--wave-delay:` + getTimeOut(n) + `s`"></div>
    </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
    }
  },
  methods: {
    getTimeOut(n) {
      if (n <= 13) {
        return (13 - n) * 0.1;
      }else if (n > 13) {
        return (n - 13) * 0.1;
      }
    }
  }
}
</script>

<style scoped>
body {
  display: grid;
  place-items: center;
  height: 10vh;
  background-color: #0e0e0e;
}

.audio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  //width: 200px;
  height: 10px;
}

.audio .wave {
  height: 5px;
  display: block;
  width: 3px;
  border-radius: 15px;
  //background: #505050;
  animation: audio-wave 1s ease-in-out infinite;
  animation-delay: var(--wave-delay, 0s); /* 使用 CSS 变量设置动画延迟 */
}

@keyframes audio-wave {
  0% {
    height: 5px;
    transform: translateY(0px);
    background: #ff8e3a;
  }

  25% {
    //height: 10px;
    //transform: translateY(0px) scaleY(1);
    background: #9c73f8;
  }

  50% {
    height: 15px;
    transform: translateY(0px) scaleY(1);
    background: #ed509e;
  }

  75% {
    //height: 5px;
    //transform: translateY(0px) scaleY(1);
    background: #9c73f8;
  }

  100% {
    height: 5px;
    transform: translateY(0px);
    background: #0fccce;
  }
}
</style>